<template>
	<view class="wrapper">
    <view class="item" v-for="(item, index) in list" :key="index" @click="handleView(item)">
      <view class="image">
        <u--image
          lazy-load width="150rpx"
          height="150rpx"
          :fade="true" duration="450"
          :src="baseUrl + item.image.thumbnail_path"
          v-if="item.image"></u--image>
      </view>
      <view class="desc">
        <view class="title one-lines">{{ item.title }}</view>
        <view class="time">{{ item.create_time }}</view>
      </view>
    </view>
    <view class="nothing" v-if="list.length === 0">暂无相关信息...</view>
  </view>
</template>

<script>
import base64 from '../../util/base64'
import config from '../../config/config'
import Service from '../../api/service'
const serviceModel = new Service()

	export default {
		data() {
			return {
			  baseUrl: config.baseUrl,
        list: [],
        queryList: {
          page: 0,
          pageSize: 10,
          busy: false
        }
			}
		},
    onReachBottom() {
      this.getList(true)
    },
		onLoad() {
      this.getList()
		},
		methods: {
      getList(append = false) {
        if (this.queryList.busy === false) {
          this.queryList.page++
          this.loading = true
          this.queryList.busy = true
          serviceModel.learnList({
            ...this.queryList
          }).then(response => {
            let { data } = response
            data = base64.parse(data)
            if (data.list.length === 0) {
              this.queryList.busy = true
            } else {
              this.queryList.busy = false
              if (append) {
                this.list = this.list.concat(data.list)
              } else {
                this.list = data.list
              }
            }
            // console.log(this.list)
          })
        }
      },
      handleView(item) {
        uni.navigateTo({
          url: `/sub_service/learn/detail?id=${item.id}`
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
.wrapper {
  background: $background_color;
  padding: 20rpx;
  font-size: 24rpx;
  .nothing {
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    border-radius: 10rpx;
    color: #ccc;
  }
  .item {
    background: white;
    padding: 20rpx;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
    .image {
      width: 170rpx;
    }
    .desc {
      padding-left: 10px;
      .title {
        font-weight: 700;
        //height: 30px;
        line-height: 20px;
        //background: red;
      }
      .time {
        color: #ccc;
      }
    }
  }
}
</style>
